<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <a-upload name="file" :data="uploadData" :customRequest="chunkUpload" :action="uploadUrl" :remove="beforeRemove">
      <a-button>
        <a-icon type="upload" /> Click to Upload
      </a-button>
    </a-upload>
  </div>
</template>

<script>
import { Button, Upload, Icon } from 'ant-design-vue'
import chunkUpload from '../utils/chunkupload'

export default {
  name: 'HelloWorld',
  components: {
    AButton: Button,
    AUpload: Upload,
    AIcon: Icon,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      uploadData: {
        //这里面放额外携带的参数
      },
      //文件上传的路径
      uploadUrl: 'http://localhost:8000/uploadfile/', //文件上传的路径
      chunkUpload: chunkUpload, // 分片上传自定义方法，在头部引入了
    }
  },
  methods: {
    onError(err, file, fileList) {
      // this.$store.getters.chunkUploadXhr.forEach((item) => {
      //   item.abort()
      // })
      this.$alert('文件上传失败，请重试', '错误', {
        confirmButtonText: '确定',
      })
    },
    beforeRemove(file) {
      // 如果正在分片上传，则取消分片上传
      // if (file.percentage !== 100) {
      //   this.$store.getters.chunkUploadXhr.forEach((item) => {
      //     item.abort()
      //   })
      // }
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
